<script lang="jsx" setup>
import { ref } from 'vue';
import { Button } from 'ant-design-vue';
import dayjs from 'dayjs';
import {
  getReceiveList,
  getUseList,
  receiveListDelete,
  useListDelete
} from '@/service/api/modules/workwear/test-rack-management';

const props = defineProps({
  testStandId: {
    type: String,
    default: null
  }
});

const columns = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'prodNo',
    dataIndex: 'prodNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '领取日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'receive',
    dataIndex: 'receive',
    title: '领取人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'table-cz',
    dataIndex: 'table-cz',
    title: '操作',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100,
    customRender: ({ record }) => {
      return (
        <Button
          type="link"
          danger
          class="pl-3px pr-3px"
          onClick={() => {
            del(record, 1);
          }}
        >
          删除
        </Button>
      );
    }
  }
];
const tableData = ref([]);
const loading = ref(false);

function getTableData() {
  loading.value = true;
  getReceiveList({ testStandId: props.testStandId })
    .then(({ data, error }) => {
      if (!error) {
        data.forEach((item, index) => {
          item.dataIndex = index + 1;
        });
        tableData.value = data;
      }
    })
    .finally(() => (loading.value = false));
}

getTableData();

const useColumns = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotNo',
    dataIndex: 'lotNo',
    title: 'LOT号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'prodNo',
    dataIndex: 'prodNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'testStandProdNo',
    dataIndex: 'testStandProdNo',
    title: '测试架编号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'testNum',
    dataIndex: 'testNum',
    title: '使用次数',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'testInitTotal',
    dataIndex: 'testInitTotal',
    title: '初始次数',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '录入时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'operator',
    dataIndex: 'operator',
    title: '录入人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '备注',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'table-cz',
    dataIndex: 'table-cz',
    title: '操作',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100,
    customRender: ({ record }) => {
      return (
        <Button
          type="link"
          danger
          class="pl-3px pr-3px"
          onClick={() => {
            del(record, 2);
          }}
        >
          删除
        </Button>
      );
    }
  }
];
const useLoading = ref(false);
const useTableData = ref([]);

function getUseTableData() {
  useLoading.value = false;
  getUseList({ testStandId: props.testStandId })
    .then(({ data, error }) => {
      if (!error) {
        data.forEach((item, index) => {
          item.dataIndex = index + 1;
        });
        useTableData.value = data;
      }
    })
    .finally(() => (useLoading.value = false));
}

getUseTableData();

function del(row, type) {
  window.$modal.confirm({
    title: `确定删除?`,
    onOk: () => {
      let pro;
      if (type === 1) {
        pro = receiveListDelete(row.testStandReceiveUuid);
      } else {
        pro = useListDelete(row.testStandUseUuid);
      }

      pro.then(({ error }) => {
        if (!error) {
          window.$message.success('删除成功');
          getTableData();
        }
      });
    },
    onCancel: () => {}
  });
}

const activeKey = ref('1');
</script>

<template>
  <ATabs v-model:activeKey="activeKey" class="test-rack-management-list-tabs h-full w-full">
    <ATabPane key="1" tab="领取记录">
      <ATable
        :columns="columns"
        :data-source="tableData"
        row-key="testStandReceiveUuid"
        :scroll="{ y: 'auto' }"
        :loading="loading"
        :pagination="false"
        class="h-full"
        bordered
        size="small"
      />
    </ATabPane>
    <ATabPane key="2" tab="使用记录" force-render>
      <ATable
        :columns="useColumns"
        :data-source="useTableData"
        row-key="testStandUseUuid"
        :scroll="{ y: 'auto' }"
        :loading="useLoading"
        :pagination="false"
        class="h-full"
        bordered
        size="small"
      />
    </ATabPane>
  </ATabs>
</template>

<style lang="scss" scoped>
.test-rack-management-list-tabs {
  :deep(.ant-tabs-content-holder) {
    height: calc(100% - 46px);
    .ant-tabs-content {
      height: 100%;
    }
  }
}
</style>
